<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,height=device-height,viewport-fit=cover,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Test</title>
	<style>
		button {
			line-height: 2em;
		}
	</style>
</head>
<body>
	<section>
		<h2>文档</h2>
		<p><a href="http://confluence.ppdai.com/pages/viewpage.action?pageId=12423347">H5客户端交互</a></p>
		<p>ver 0.0.7</p>
	</section>
	<section>
		<ol>
			<li>
				<h3>返回最近原生界面</h3>
				<button onclick="navigateBack()">navigateBack</button>
				<script>
					var navigateBack = function () {
						try {
							WebViewJavascriptBridge.callHandler('navigateBack', {
								'code': 1,
								'message': '返回最近原生界面',
								'data': {}
							});
						} catch(ex) {
							try {
								AppBridge.navigateBack();
							} catch (ex) {
								alert('navigateBack failed');
								throw ex;
							}
						}
					}
				</script>
			</li>
		</ol>
		<hr>
		<div>
			<button onclick="injectWebViewJavascriptBridge(injectWebViewJavascriptBridgeCallback)" style="width: 100%;">注入WebViewJavascriptBridge</button>
			<script>
				var injectWebViewJavascriptBridge = function (callback) {
					if (window.WebViewJavascriptBridge) {
						return callback(WebViewJavascriptBridge);
					}
					// for ios
					if (window.WVJBCallbacks) {
						return window.WVJBCallbacks.push(callback);
					}
					window.WVJBCallbacks = [callback];
					var WVJBIframe = document.createElement('iframe');
					WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
					WVJBIframe.style.display = 'none';
					document.body.appendChild(WVJBIframe);
					setTimeout(function () {
						document.body.removeChild(WVJBIframe);
					}, 0);
					// for android
					document.addEventListener('WebViewJavascriptBridgeReady', function () {
						callback(WebViewJavascriptBridge);
					}, false);
				};
				var injectWebViewJavascriptBridgeCallback = function (bridge) {
					bridge.registerHandler('testJSFunction', function (data, responseCallback) {
						alert('JS方法被调用:' + data);
						responseCallback('js执行过了');
					});
				};
			</script>
		</div>
	</section>
</body>
</html>
